<template>
  <div class="register-container">
    <div class="register-card">
      <div class="register-header">
        <h1 class="register-title">用户注册</h1>
        <p class="register-subtitle">创建您的Exam AI账户</p>
      </div>

      <form @submit.prevent="handleRegister" class="register-form">
        <div class="form-group">
          <label for="username" class="form-label">用户名</label>
          <input id="username" v-model="form.username" type="text" placeholder="请输入用户名" required :disabled="loading"
            class="form-input">
        </div>

        <div class="form-group">
          <label for="email" class="form-label">邮箱</label>
          <input id="email" v-model="form.email" type="email" placeholder="请输入邮箱" required :disabled="loading"
            class="form-input">
        </div>

        <div class="form-group">
          <label for="password" class="form-label">密码</label>
          <input id="password" v-model="form.password" type="password" placeholder="请输入密码" required :disabled="loading"
            class="form-input">
        </div>

        <div class="form-group">
          <label for="confirmPassword" class="form-label">确认密码</label>
          <input id="confirmPassword" v-model="form.confirmPassword" type="password" placeholder="请再次输入密码" required
            :disabled="loading" class="form-input">
        </div>

        <div v-if="error" class="error-message">
          <i class="error-icon">⚠️</i>
          {{ error }}
        </div>

        <button type="submit" :disabled="loading || !form.username || !form.password || !form.confirmPassword"
          class="register-button">
          <span v-if="loading" class="loading-spinner"></span>
          {{ loading ? '注册中...' : '注册' }}
        </button>
      </form>

      <div class="register-footer">
        <p class="login-link">
          已有账号？<router-link to="/login" class="link">立即登录</router-link>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'
import '@/styles/auth/register.css'

const authStore = useAuthStore()
const router = useRouter()

const form = reactive({
  username: '',
  email: '',
  password: '',
  confirmPassword: ''
})

const loading = ref(false)
const error = ref('')

const handleRegister = async () => {
  if (loading.value) return

  // 验证密码确认
  if (form.password !== form.confirmPassword) {
    error.value = '两次输入的密码不一致'
    return
  }

  loading.value = true
  error.value = ''

  try {
    // TODO: 调用注册API
    await authStore.login({
      user: { username: form.username },
      token: 'mock-token'
    })
    router.push('/')
  } catch (err) {
    console.error('注册失败:', err)
    error.value = '注册失败，请稍后重试'
  } finally {
    loading.value = false
  }
}
</script>
